.bb {
	svg {
		// font-size: 12px;
		// line-height: 1;

		font: 10px sans-serif;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}

	path,
	line {
		fill: none;
		// stroke: #000;
	}

	path.domain {
		.vscode-dark & {
			stroke: var(--color-background--lighten-15);
		}

		.vscode-light & {
			stroke: var(--color-background--darken-15);
		}
	}

	text,
	.bb-button {
		user-select: none;
		// fill: var(--color-foreground--75);
		fill: var(--color-view-foreground);
		font-size: 11px;
	}

	.bb-legend-item-tile,
	.bb-xgrid-focus,
	.bb-ygrid-focus,
	.bb-ygrid,
	.bb-event-rect,
	.bb-bars path {
		shape-rendering: crispEdges;
	}

	.bb-chart-arc {
		.bb-gauge-value {
			fill: #000;
		}

		path {
			stroke: #fff;
		}

		rect {
			stroke: #fff;
			stroke-width: 1;
		}

		text {
			fill: #fff;
			font-size: 13px;
		}
	}

	/*-- Axis --*/
	.bb-axis {
		shape-rendering: crispEdges;
	}

	// .bb-axis-y,
	// .bb-axis-y2 {
	// 	text {
	// 		fill: var(--color-foreground--75);
	// 	}
	// }

	// .bb-event-rects {
	// 	fill-opacity: 1 !important;

	// 	.bb-event-rect {
	// 		fill: transparent;

	// 		&._active_ {
	// 			fill: rgba(39, 201, 3, 0.05);
	// 		}
	// 	}
	// }

	// .tick._active_ text {
	// 	fill: #00c83c !important;
	// }

	/*-- Grid --*/
	.bb-grid {
		pointer-events: none;

		line {
			.vscode-dark & {
				stroke: var(--color-background--lighten-05);

				&.bb-ygrid {
					stroke: var(--color-background--lighten-05);
				}
			}

			.vscode-light & {
				stroke: var(--color-background--darken-05);

				&.bb-ygrid {
					stroke: var(--color-background--darken-05);
				}
			}
		}

		text {
			// fill: #aaa;
			fill: var(--color-view-foreground);
		}
	}

	// .bb-xgrid {
	// 	stroke-dasharray: 2 2;
	// }

	// .bb-ygrid {
	// 	stroke-dasharray: 2 1;
	// }

	.bb-xgrid-focus {
		line {
			.vscode-dark & {
				stroke: var(--color-background--lighten-30);
			}
			.vscode-light & {
				stroke: var(--color-background--darken-30);
			}
		}
	}

	/*-- Text on Chart --*/
	.bb-text.bb-empty {
		fill: #808080;
		font-size: 2em;
	}

	/*-- Line --*/
	.bb-line {
		stroke-width: 1px;
	}

	/*-- Point --*/
	.bb-circle {
		&._expanded_ {
			opacity: 1 !important;
			fill-opacity: 1 !important;
			stroke-opacity: 1 !important;
			stroke-width: 3px;
		}
	}

	.bb-selected-circle {
		opacity: 1 !important;
		fill-opacity: 1 !important;
		stroke-opacity: 1 !important;
		stroke-width: 3px;
	}

	// rect.bb-circle,
	// use.bb-circle {
	// 	&._expanded_ {
	// 		stroke-width: 3px;
	// 	}
	// }

	// .bb-selected-circle {
	// 	stroke-width: 2px;

	// 	.vscode-dark & {
	// 		fill: rgba(255, 255, 255, 0.2);
	// 	}

	// 	.vscode-light & {
	// 		fill: rgba(0, 0, 0, 0.1);
	// 	}
	// }

	/*-- Bar --*/
	.bb-bar {
		stroke-width: 0;
		opacity: 0.9 !important;
		fill-opacity: 0.9 !important;

		&._expanded_ {
			opacity: 1 !important;
			fill-opacity: 1 !important;
		}
	}

	/*-- Candlestick --*/
	.bb-candlestick {
		stroke-width: 1px;

		&._expanded_ {
			fill-opacity: 0.75;
		}
	}

	/*-- Focus --*/
	.bb-target.bb-focused,
	.bb-circles.bb-focused {
		opacity: 1;
	}

	.bb-target.bb-focused path.bb-line,
	.bb-target.bb-focused path.bb-step,
	.bb-circles.bb-focused path.bb-line,
	.bb-circles.bb-focused path.bb-step {
		stroke-width: 2px;
	}

	.bb-target.bb-defocused,
	.bb-circles.bb-defocused {
		opacity: 0.2 !important;
	}
	.bb-target.bb-defocused .text-overlapping,
	.bb-circles.bb-defocused .text-overlapping {
		opacity: 0.05 !important;
	}

	/*-- Region --*/
	.bb-region {
		fill: steelblue;
		fill-opacity: 0.1;
	}

	/*-- Zoom region --*/
	.bb-zoom-brush {
		.vscode-dark & {
			fill: white;
			fill-opacity: 0.2;
		}

		.vscode-light & {
			fill: black;
			fill-opacity: 0.1;
		}
	}

	/*-- Brush --*/
	.bb-brush {
		.extent {
			fill-opacity: 0.1;
		}
	}

	/*-- Legend --*/
	.bb-legend-item {
		font-size: 12px;
		user-select: none;
	}

	.bb-legend-item-hidden {
		opacity: 0.15;
	}

	.bb-legend-background {
		opacity: 0.75;
		fill: white;
		stroke: lightgray;
		stroke-width: 1;
	}

	/*-- Title --*/
	.bb-title {
		font: 14px sans-serif;
	}

	/*-- Tooltip --*/
	.bb-tooltip-container {
		z-index: 10;
		user-select: none;
	}

	.bb-tooltip {
		display: flex;
		border-collapse: collapse;
		border-spacing: 0;
		background-color: var(--color-hover-background);
		color: var(--color-hover-foreground);
		empty-cells: show;
		opacity: 1;
		box-shadow: 7px 7px 12px -9px var(--color-hover-border);

		font-size: var(--font-size);
		font-family: var(--font-family);

		tbody {
			border: 1px solid var(--color-hover-border);
		}

		th {
			padding: 0.5rem 1rem;
			text-align: left;
		}

		tr {
			&:not(.bb-tooltip-name-additions, .bb-tooltip-name-deletions) {
				display: flex;
				flex-direction: column-reverse;
				margin-bottom: -1px;

				td {
					&.name {
						display: flex;
						align-items: center;
						font-size: 12px;
						font-family: var(--editor-font-family);
						background-color: var(--color-hover-statusBarBackground);
						border-top: 1px solid var(--color-hover-border);
						border-bottom: 1px solid var(--color-hover-border);
						padding: 0.5rem;
						line-height: 2rem;

						&:before {
							font: normal normal normal 16px/1 codicon;
							display: inline-block;
							text-decoration: none;
							text-rendering: auto;
							text-align: center;
							-webkit-font-smoothing: antialiased;
							-moz-osx-font-smoothing: grayscale;
							user-select: none;

							vertical-align: middle;
							line-height: 2rem;
							padding-right: 0.25rem;

							content: '\eafc';
						}

						span {
							display: none;
						}
					}

					&.value {
						display: flex;
						padding: 0.25rem 2rem 1rem 2rem;
						white-space: pre-line;
						word-wrap: break-word;
						overflow-wrap: break-word;
						max-width: 450px;
						max-height: 450px;
						overflow-y: scroll;
						overflow-x: hidden;
					}
				}
			}

			&.bb-tooltip-name-additions,
			&.bb-tooltip-name-deletions {
				display: inline-flex;
				flex-direction: row-reverse;
				justify-content: center;
				width: calc(50% - 2rem);
				margin: 0px 1rem;

				td {
					&.name {
						text-transform: lowercase;
					}
					&.value {
						margin-right: 0.25rem;
					}
				}
			}
		}

		// td > span,
		// td > svg {
		// 	display: inline-block;
		// 	width: 10px;
		// 	height: 10px;
		// 	margin-right: 6px;
		// }
	}

	/*-- Area --*/
	.bb-area {
		stroke-width: 0;
		opacity: 0.2;
	}

	/*-- Arc --*/
	.bb-chart-arcs-title {
		dominant-baseline: middle;
		font-size: 1.3em;
	}

	text.bb-chart-arcs-gauge-title {
		dominant-baseline: middle;
		font-size: 2.7em;
	}

	.bb-chart-arcs .bb-chart-arcs-background {
		fill: #e0e0e0;
		stroke: #fff;
	}

	.bb-chart-arcs .bb-chart-arcs-gauge-unit {
		fill: #000;
		font-size: 16px;
	}

	.bb-chart-arcs .bb-chart-arcs-gauge-max {
		fill: #777;
	}

	.bb-chart-arcs .bb-chart-arcs-gauge-min {
		fill: #777;
	}

	/*-- Radar --*/
	.bb-chart-radars .bb-levels polygon {
		fill: none;
		stroke: #848282;
		stroke-width: 0.5px;
	}

	.bb-chart-radars .bb-levels text {
		fill: #848282;
	}

	.bb-chart-radars .bb-axis line {
		stroke: #848282;
		stroke-width: 0.5px;
	}

	.bb-chart-radars .bb-axis text {
		font-size: 1.15em;
		cursor: default;
	}

	.bb-chart-radars .bb-shapes polygon {
		fill-opacity: 0.2;
		stroke-width: 1px;
	}

	/*-- Button --*/
	.bb-button {
		position: absolute;
		top: 0;
		right: 2rem;

		border: 1px solid var(--color-button-background);
		background-color: var(--color-button-background);
		color: var(--color-button-foreground);

		font-size: var(--font-size);
		font-family: var(--font-family);

		.bb-zoom-reset {
			display: inline-block;
			padding: 0.5rem 1rem;
			cursor: pointer;
		}
	}
}
